<template>
  <l-table 
  :data="tableData" 
  :options="options"
  elementLoadingText="加载中...."
  elementLoadingBackground="rgba(0,0,0,.8)"
  @check="check"
  isEditRow
  v-model:editRowIndex="editRowIndex"
  pageination="true"
  :total="total"
  :currentPage="current"
  :pageSize="pageSize"
  @sizeChange="sizeChange"
  @currentChange="currentChange"
  >
    <template #date="{ scope }">
      <el-icon-timer></el-icon-timer>
      {{ scope.row.date }}
    </template>
    <template #name="{ scope }">
      <el-popover effect="light" trigger="hover" placement="top" width="auto">
        <template #default>
          <div>name: {{ scope.row.name }}</div>
          <div>address: {{ scope.row.address }}</div>
        </template>
        <template #reference>
          <el-tag>{{ scope.row.name }}</el-tag>
        </template>
      </el-popover>
    </template>
    <template #action="{ scope }">
      <el-button size="small" type="primary" @click="edit(scope)">编辑</el-button>
      <el-button size="small" type="danger">删除</el-button>
    </template>
    <template #editRow="{ scope }">
      <el-button size="small" type="primary">确认</el-button>
      <el-button size="small" type="danger">取消</el-button>
    </template>
    <template #editCell="{ scope }"> 
      <el-button size="small" type="primary" style="margin: 0 5px;">确认</el-button>
      <el-button size="small">取消</el-button>
    </template>
  </l-table>
  
</template>

<script setup lang="ts">
import { TableOptions } from '../../components/table/src/type';
import { ref, onMounted } from "vue";
import axios from 'axios'
interface TableData {
  date: string,
  name: string,
  address: string
}

let tableData = ref<TableData[]>([])

let editRowIndex = ref<string>('edit')
// setTimeout(() => {
//   tableData.value = 
// }, 3000);
//表格配置
let options: TableOptions[] = [
  {
    lable: "日期",
    prop: "date",
    align: "center",
    slot: "date",
    editable: true
  },
  {
    lable: "姓名",
    prop: "name",
    align: "center",
    slot: "name",
    width: 100,
  },
  {
    lable: "地址",
    prop: "address",
    align: "center",
    editable: true
  },
  {
    lable: "操作",
    align: "center",
    action: true,
  },
];

let current = ref<number>(1)
let pageSize = ref<number>(10)
let total = ref<number>(0)

let getData = () => {
  axios.post('/api/list',{
    current: current.value,
    pageSize: pageSize.value
  }).then((res: any) => {
    tableData.value = res.data.data.rows
    total.value = res.data.data.total
    console.log(tableData.value);
  })
}

onMounted(() => {
  getData()
})

const edit = (scope: any) => {
  editRowIndex.value = 'edit'
  
};
let check = (scope: any) => {
  console.log(scope)
}
let sizeChange = (val: number) => {
  pageSize.value = val
  getData()
}
let currentChange = (val: number) => {
  current.value = val
  getData()
}
</script>

<style scoped>
svg {
  width: 1em;
  height: 1em;
}
</style>
